<template>
  <!-- 地图 -->
  <el-dialog
    v-el-drag-dialog
    append-to-body
    title="位置查询"
    :visible.sync="visible"
    width="1024px"
    @closed="reset"
  >
    <div
      v-if="visible"
      v-loading="!center"
      element-loading-text="正在加载地图"
    >
      <el-form ref="dataForm" :inline="true" class="form" :rules="rules" :model="temp">
        <el-form-item label="地址查询" prop="address">
          <el-input v-model="temp.address" placeholder="单行输入" style="width: 450px;" clearable />
        </el-form-item>
        <el-button type="primary" size="mini" @click="search">搜索</el-button>
        <el-button size="mini" @click="reset">重置</el-button>
        <span>点击地址可直接进行定位</span>
      </el-form>
      <baidu-map
        class="bm-view"
        :center="center"
        :zoom="15"
        inertial-dragging
        @ready="mapReady"
        @click="selectPoint"
      >
        <bm-marker
          :position="point"
          :dragging="true"
        />
        <bm-geolocation
          anchor="BMAP_ANCHOR_BOTTOM_RIGHT"
          :show-address-bar="true"
          :auto-location="true"
        />
        <bm-local-search :keyword="keyword" :auto-viewport="true" @searchcomplete="search" />
      </baidu-map>
    </div>
    <div slot="footer" class="dialog-footer">
      <el-button @click="visible = false">
        关闭
      </el-button>
      <el-button :loading="$loadingPlugin.success" type="primary" @click="success">
        保存
      </el-button>
    </div>
  </el-dialog>
</template>

<script>

  export default {
    name: 'location',
    data() {
      return {
        visible: false,
        temp: {
          address: ''
        },
        myGeo: null,
        center: null,
        point: {
          lng: 116.403765,
          lat: 39.914850
        },
        keyword: '',
        province: '',
        city: '',
        district: '',
        rules: {
          address: [{ required: true, message: '请输入查询地址', trigger: 'change' }]
        }
      }
    },
    methods: {
      open(temp) {
        return new Promise(resolve => {
          this.resolve = resolve
          this.visible = true
        })
      },
      mapReady({ BMap, map }) {
        const _this = this
        // 获取自动定位方法
        const geolocation = new BMap.Geolocation()
        // 获取逆解析方法实例
        this.myGeo = new BMap.Geocoder()
        // 获取自动定位获取的坐标信息
        geolocation.getCurrentPosition(function(r) {
          _this.center = {
            lng: r.point.lng,
            lat: r.point.lat
          }
          _this.point = {
            lng: r.point.lng,
            lat: r.point.lat
          }
          _this.pointToAddress(r.point)
        }, { enabaleHighAccuracy: true })
      },
      // 鼠标点击地图定位点
      async selectPoint({ type, target, point, pixel, overlay }) {
        this.point = point
        this.pointToAddress(point)
      },
      // 根据坐标逆解析获取地址详细描述
      pointToAddress(point) {
        const _this = this
        this.myGeo.getLocation(point, function(result) {
          if (result) {
            console.log(result, 111111111)
            _this.province = result.addressComponents.province
            _this.city = result.addressComponents.city
            _this.district = result.addressComponents.district
            _this.$set(_this.temp, 'address', result.address)
          }
        })
      },
      search() {
        this.$refs.dataForm.validate(valid => {
          if (!valid) return
          this.keyword = this.temp.address
        })
      },
      success() {
        this.resolve({
          address: this.temp.address,
          province: this.province,
          city: this.city,
          district: this.district,
          point: this.point,
          center: this.center
        })
        this.visible = false
      },
      reset() {
        this.temp = {
          address: ''
        }
        this.myGeo = null
        this.center = null
        this.point = {
          lng: 116.403765,
          lat: 39.914850
        }
        this.keyword = ''
        this.province = ''
        this.city = ''
        this.district = ''
        // this.$nextTick(() => {
        //   this.$refs.dataForm.clearValidate()
        // })
        // this.$refs.dataForm.resetFields()
      }
    }
  }
</script>

<style lang="scss" scoped>
.bm-view {
  width: 100%;
  height: 500px;
}
</style>
